<template>
  <div class="scroll-container"  v-if="msgList.length > 0">
    <!-- 外层容器，隐藏溢出内容 -->
    <div 
        class="scroll-content" 
        :style="{ transform: `translateY(${offsetindex}px)` }"
        @click="handTap('/control/notice')"
        @transitionend="onTransitionEnd"
        @mouseenter="stopScroll" 
        @mouseleave="startScroll"
        >
      <!-- 循环渲染数据项 -->
      <div v-for="(item, index) in msgList" :key="index" class="item">
       
        <img src="https://head-image-1259022270.cos.ap-guangzhou.myqcloud.com/head-image-8def1b45-36ab-4dfa-a220-2a894ca33b67消息.png" alt="">

        <span>{{ item }}</span>
      </div>
    </div>
    <!-- <div v-else class="header">重要，你有一条代办消息</div> -->

  </div>

</template>

<script> 
var indexNum = 1;
export default {
  props: {
   
  },
  data() {
    return {
      currentIndex: 0,
      itemHeight: 40, // 单个项的高度（需与 CSS 一致）
      offsetindex: 0,
      timer: null,
      msgList:[],
      extendedList:[]
    };
  },
  mounted() {
    this.getmsgList();
    // console.log('ceshi ceshi ',this.extendedList)
  },
  watch: {
    
  },
  methods: {
    handTap(type){
      // this.$emit('jumpTo', type);
       this.$router.push({
        path: type
      });

    },
    startScroll() {
        
      this.timer = setInterval(() => {
        this.currentIndex++;
        this.offsetindex = -this.currentIndex * this.itemHeight;
        indexNum++
        if(this.msgList.length == indexNum){
          // console.log(indexNum)
            indexNum = 1;

          if(this.msgList.length > 400){
            clearInterval(this.timer);
            this.getmsgList();
          }else{
            this.msgList = [...this.msgList,...this.msgList]
          }
          
        }
      }, 2000);
    },
    stopScroll() {
      clearInterval(this.timer);
    },
    onTransitionEnd() {
      // 当滚动到复制的最后一项时，瞬间跳回第一项
      if (this.currentIndex >= this.msgList.length) {
        this.currentIndex = 0;
        this.offsetindex = 0;
      }
    },
    getmsgList() {
      const url = "/government-platform-center/leader/getPublicMsg";
      this.$axios
        .post(url, {
            current: 40,
            offset: 1,
            isRead: 0,
          }, 
          {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          
          if (res.data.code == 0 && res.data.data.length > 0 ) {
            console.log('消息消息=====',res.data.data)
            res.data.data.map(v=>{
              this.msgList.push(v.title)
            })

            this.startScroll();


          }else{
            //  this.msgList =['数据1', '数据2', '数据3', '数据4', '数据5']

            // this.startScroll();
          }
        });
    },
    // 监听滚动事件
    handleScroll() {
      const container = this.$el;
      if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
        // 加载更多数据
        this.loadMoreData();
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.scroll-container {
  height: 40px; /* 显示区域高度 */
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 10px;
}
.scroll-content {
  transition: transform 1.5s ease; /* 平滑过渡动画 */
}
.item {
  height: 40px;
  line-height: 40px;
  text-align: left;
  display: flex;
  align-items: center;
}
.item img{
  width: 20px;
  height: 20px;
  // margin-right: 10px;
}
.item .imgs{
  position: relative;
}
.item .imgs .yuan{
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 14px;
  right: 4px;
  background-color: red;
}
.eventId-cell {
  color: #1890ff;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
.header {
  height: 40px;
  line-height: 40px;
  background: #fff;
  padding: 0 10px;
  border-radius: 5px;
  margin-bottom: 10px;
}
</style>
